<!--
 * @Author: yangmy
 * @Date: 2022-03-10 18:06:33
 * @FileDescription:本期价格放大modal
-->
<template>
  <div class="right-lower-modal">
    <com-box
      :title="title"
      :leftUnit="exeNo"
      :rightUnit="unit"
      class="com-box-title"
    >
      <loading v-show="loading" />
      <template #titleLeft>
        <div class="header-left header-box">{{ unit }}</div>
      </template>
      <div style="width: 95%; margin: auto; height: 600px; margin-top: 12px">
        <div class="Header">
          <span v-if="header.araea">{{ header.araea }}</span>
          <span v-if="header.standardName">{{ header.standardName }}</span>
          <span v-if="header.hotelNum" v-html="header.hotelNum"></span>
          <span v-if="header.currentPrice">{{ header.currentPrice }}</span>
          <span v-if="header.ring" v-html="header.ring"></span>
        </div>
        <div class="main" v-if="Object.keys(CurrentPriceList).length > 0">
          <el-scrollbar
            height="550px"
            ref="scrollbar"
            @scroll="handleScroll"
            @mouseover="stopScroll"
            @mouseout="startScroll"
          >
            <ul>
              <li
                v-for="(item, index) in CurrentPriceList"
                :key="index"
                class="tbody"
              >
                <span v-if="item.area" :class="'name'">
                  {{ item.area }}
                </span>
                <span v-if="header.standardName">
                  <p>{{ item.standard }}</p>
                </span>
                <span v-if="header.hotelNum">
                  <p>{{ item.hotelNum }}</p>
                </span>
                <span v-if="header.currentPrice">
                  <p>{{ item.currentPrice }}</p>
                </span>
                <span v-if="header.ring">
                  <p
                    :class="
                      item.ring
                        ? item.ring.indexOf('-') != -1
                          ? 'green'
                          : parseFloat(item.ring) == 0
                          ? ''
                          : 'red'
                        : ''
                    "
                  >
                    {{ item.ring }}
                  </p>
                </span>
              </li>
            </ul>
          </el-scrollbar>
        </div>
        <div v-else class="main list-noData">
          <span>暂无数据</span>
        </div>
      </div>
    </com-box>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  onMounted,
  onBeforeUnmount
} from 'vue'
import comBox from '@/components/comBox/comBox.vue'
import loading from '@/charts/loading.vue'
import httpRequest from '@/service'

export default defineComponent({
  name: 'rightLowerModal',
  components: {
    comBox,
    loading
  },
  setup() {
    const state: any = reactive({
      timerFlag: true,
      exeNo: '',
      unit: '',
      title: '',
      loading: false,
      header: {}, //表头
      CurrentPriceList: [],
      timer: null,
      getData: () => {
        state.loading = true
        httpRequest
          .get({
            url: 'M2P3JdList',
            params: {}
          })
          .then((res) => {
            if (res.code == 200) {
              state.title = res.title
              state.exeNo = res.exeNo ? `期号：${res.exeNo}` : ''
              state.unit = res.unit ? `计量单位：${res.unit}` : ''
              state.CurrentPriceList = res.data.map((item: any) => {
                return item
              })
              state.header = {}
              Object.keys(res.map).forEach((item) => {
                state.header[item] = ''
                state.header[item] = res.map[item]
              })
            }
            state.loading = false
          })
          .catch(() => {
            state.loading = false
            console.log('请求失败')
          })
      }
    })

    const scrollbar = ref()
    let curScrollTop = 0
    onMounted(() => {
      onScroll()
      state.getData()
    })

    const onScroll = () => {
      state.timer = setInterval(() => {
        if (state.timerFlag) {
          if (scrollbar.value) {
            curScrollTop++
            scrollbar.value?.setScrollTop(curScrollTop)
          }
          if (curScrollTop - scrollbar.value.wrap$.scrollTop > 1) {
            curScrollTop = 0
          }
        }
      }, 50)
    }

    const stopScroll = () => {
      state.timerFlag = false
    }
    const startScroll = () => {
      state.timerFlag = true
      curScrollTop = scrollbar.value.wrap$.scrollTop
    }
    // 滚动时触发
    const handleScroll = (pos: any) => {
      curScrollTop = pos.scrollTop
    }

    onBeforeUnmount(() => {
      clearInterval(state.timer)
    })

    const refreshData = () => {
      state.getData()
    }

    const { title, CurrentPriceList, header, unit, exeNo, loading } =
      toRefs(state)

    return {
      title,
      CurrentPriceList,
      scrollbar,
      header,
      unit,
      exeNo,
      loading,
      stopScroll,
      startScroll,
      handleScroll,
      refreshData
    }
  }
})
</script>

<style lang="less" scoped>
@MX: 1.9; // 放大倍数

.right-lower-modal {
  width: 620px * @MX;
  height: 370px * @MX;
  overflow: hidden;

  .com-box-title {
    ::v-deep(.com-header) {
      height: 45px * @MX;
    }
    ::v-deep(.title) {
      font-size: 20px * @MX;
      line-height: 45px * @MX;
      background-size: 264px * @MX 45px * @MX;
      flex: 0 0 264px * @MX;
    }
  }
}

.header-box {
  white-space: nowrap;
  width: 100%;
  height: 100%;
  font-size: 14px * @MX;
  text-align: left;
  color: #46ede8;
  font-family: 'Microsoft YaHei';
  display: flex;
  align-items: flex-end;
  font-weight: bold;
}

.header-left {
  justify-content: flex-start;
  padding: 0px 20px * @MX;
}

ul {
  width: 100%;
  height: 100%;
  padding: 0 14px * @MX;
}

.tbody {
  display: flex;
  height: 50px * @MX;
  align-items: center;
  justify-content: space-around;
  span {
    width: 25%;
    text-align: center;
    p:nth-child(1) {
      margin-bottom: 4px * @MX;
    }
  }
  p {
    font-size: 16px * @MX;
    font-family: 'Microsoft YaHei';
    color: #fff;
    font-weight: bold;
  }

  .red {
    font-size: 14px * @MX;
    font-weight: 550;
    color: rgb(255, 38, 38);
  }
  .green {
    font-weight: 550;
    font-size: 14px * @MX;
    color: rgb(66, 255, 0);
  }
  .name-box {
    font-size: 14px * @MX;
    font-family: 'Microsoft YaHei';
    color: rgb(255, 192, 111);
    font-weight: bold;
  }
  .name-unit {
    font-size: 10px * @MX;
  }

  .name {
    font-size: 14px * @MX;
    font-family: 'Microsoft YaHei';
    color: #fff;
    font-weight: bold;
  }
  &:nth-child(even) {
    height: 54px * @MX;
    background-color: rgba(33, 122, 255, 0.2);
  }
  &:nth-child(odd) {
    width: 100%;
    height: 75px * @MX;
  }
}

.Header {
  background-color: rgba(33, 122, 255, 0.4) !important;
  height: 46px * @MX;
  z-index: 416;
  display: flex;
  align-items: center;
  justify-content: space-around;
  span {
    width: 25%;
    white-space: pre-line;
    font-size: 14px * @MX;
    font-family: 'Microsoft YaHei';
    color: rgba(160, 220, 255, 0.902);
    text-align: center;
  }
}

.main {
  height: calc(100% - 20px * @MX);
}

.list-noData {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 26px * @MX;
  font-weight: bold;
  color: #ef7809;
}
</style>
